<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>2018,为工业设计打call</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<script type="text/javascript">
			/*动态改变根元素字体大小*/
			function recalc() {
				//获取当前屏幕的宽度
				var clientWidth = document.documentElement.clientWidth;
				//如果获取不了，就退出该脚本程序
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
				document.documentElement.style.opacity = '1';
			}
			
			function initRecalc() {
				recalc();
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
				
			}
			initRecalc();
		</script>
		<script>
			var _hmt = _hmt || [];
			(function() {
			 var hm = document.createElement("script");
			 hm.src = "https://hm.baidu.com/hm.js?2395efa84c8dbc2927811be44305650f";
			 var s = document.getElementsByTagName("script")[0]; 
			 s.parentNode.insertBefore(hm, s);
			})();
		</script>
	</head>
	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<!--first-->
				<div class="swiper-slide page page-first">
					<div class="page-wrapper">
						<div class="page-header ani" swiper-animate-effect="fadeIn"></div>
						<!--text-top-->
						<div class="page-title textcenter ani" swiper-animate-effect="bounceIn"></div>
						<!--icon-center start-->
						<div class="page-center textcenter ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.5s">
							<div class="table"></div>
							<div class="line ani" swiper-animate-effect="fadeLeft" swiper-animate-delay="1s" swiper-animate-duration="2s">
								<div></div>
							</div>
							<div class="center-left"></div>
							<div class="center-right"></div>
						</div>
						<!--icon-center end-->
						<div class="page-bottom ani" swiper-animate-effect="bounceInUp" swiper-animate-delay="1s">
							<div class="page-icon-center"></div>
							<!--text-bottom-->
							<div class="page-text textcenter"></div>
							<!--bottom-left-->
							<div class="bottom-left"></div>
							<div class="bottom-right"></div>
						</div>
					</div>
					<div class="next"></div>
				</div>
				<!--second-->
				<div class="swiper-slide page page-second">
					<div class="page-wrapper">
						<div class="page-header ani" swiper-animate-effect="fadeIn"></div>
						<!--top start-->
						<div class="page-title textcenter ani" swiper-animate-effect="bounceIn"></div>
						<!--top end-->
						<!--center start-->
						<div class="page-center ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.5s">
							<div class="center-table">
								<div class="line1">
									<div class="ani" swiper-animate-effect="toTop" swiper-animate-delay="1s" swiper-animate-duration="1s"></div>
								</div>
								<div class="line2">
									<div class="ani" swiper-animate-effect="toTop" swiper-animate-delay="2s" swiper-animate-duration="1s"></div>
								</div>
								<div class="line3">
									<div class="ani" swiper-animate-effect="toTop" swiper-animate-delay="3s" swiper-animate-duration="1s"></div>
								</div>
							</div>
							<div class="center-statue"></div>
						</div>
						<!--center end-->
						<!--bottom start-->
						<div class="page-bottom ani" swiper-animate-effect="bounceInUp" swiper-animate-delay="1s">
							<div class="bottom-bg"></div>
							<div class="bottom-text"></div>
							<div class="bottom-plane"></div>
						</div>
						<!--bottom end-->
					</div>	
					<div class="next"></div>
				</div>
				<!--third-->
				<div class="swiper-slide page page-third">
					<div class="page-wrapper">
						<div class="page-header ani" swiper-animate-effect="fadeIn"></div>
						<!--top start-->
						<div class="page-title textcenter ani" swiper-animate-effect="bounceIn"  ></div>
						<!--top end-->
						<!--center start-->
						<div class="page-center ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.5s">
							<div class="center-left"></div>
							<div class="center-table textcenter">
								<!--电池-->
								<div class="center-t ani" swiper-animate-effect="toTop" swiper-animate-delay="1s" swiper-animate-duration="1s">
									<div></div>
								</div>
								<div class="text1 textcenter ani" swiper-animate-effect="fadeIn" swiper-animate-delay="3s"></div>
								<div class="text2 textcenter ani" swiper-animate-effect="fadeIn" swiper-animate-delay="2.5s"></div>
								<div class="text3 textcenter ani" swiper-animate-effect="fadeIn" swiper-animate-delay="2s"></div>
							</div>
							<div class="center-right"></div>
						</div>
						<!--center end-->
						<!--bottom start-->
						<div class="page-bottom ani" swiper-animate-effect="bounceInUp" swiper-animate-delay="1s">
							<div class="bottom-bg textcenter"></div>
							<div class="bottom-right"></div>
							<div class="bottom-text textcenter"></div>
						</div>
						<!--bottom end-->
					</div>	
					<div class="next"></div>
				</div>
				<div class="swiper-slide page page-four">
					<div class="page-wrapper">
						<div class="page-header ani" swiper-animate-effect="fadeIn"></div>
						<!--top start-->
						<div class="page-title textcenter ani" swiper-animate-effect="bounceIn"  ></div>
						<!--top end-->
						<!--center start-->
						<div class="page-center ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.5s">
							<div class="center-table textcenter" id="piecanvas">
								<!--<div class="text1"></div>
								<div class="text2"></div>
								<div class="text3"></div>
								<div class="text4"></div>
								<div class="text5"></div>-->
							</div>
							<div class="center-statue"></div>
						</div>
						<!--center end-->
						<!--bottom start-->
						<div class="page-bottom textcenter ani" swiper-animate-effect="bounceInUp" swiper-animate-delay="1s"></div>
						<!--bottom end-->
					</div>	
					<div class="next"></div>
				</div>
				<div class="swiper-slide page page-five">
					<div class="page-wrapper">
						<div class="page-header ani" swiper-animate-effect="fadeIn"></div>
						<!--top start-->
						<div class="page-title textcenter ani" swiper-animate-effect="bounceIn"  ></div>
						<!--top end-->
						<!--center start-->
						<div class="page-center ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.5s">
							<div class="center-table textcenter">
								<div class="text1 ani" swiper-animate-effect="fadeIn" swiper-animate-delay="1s"><div class="t1"></div></div>
								<div class="text2 ani" swiper-animate-effect="fadeIn" swiper-animate-delay="1.5s"><div class="t2"></div></div>
								<div class="text3 ani" swiper-animate-effect="fadeIn" swiper-animate-delay="2s"><div class="t3"></div></div>
							</div>
							<div class="center-plane"></div>
							<div class="center-text textcenter"></div>
						</div>
						<!--center end-->
						<!--bottom start-->
						<div class="page-bottom textcenter ani" swiper-animate-effect="bounceInUp" swiper-animate-delay="1s"></div>
						<!--bottom end-->
					</div>	
					<div class="next"></div>
				</div>
				<div class="swiper-slide page page-six">
					<div class="page-wrapper">
						<div class="page-header ani" swiper-animate-effect="fadeIn"></div>
						<!--top start-->
						<div class="page-title textcenter ani" swiper-animate-effect="bounceIn"  ></div>
						<!--top end-->
						<!--center start-->
						<div class="page-center ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.5s">
							<div class="center-table textcenter">
								<div class="text1 ani" swiper-animate-effect="fadeIn" swiper-animate-delay="1s"></div>
								<div class="text2 ani" swiper-animate-effect="fadeIn" swiper-animate-delay="1.5s"></div>
								<div class="text3 ani" swiper-animate-effect="fadeIn" swiper-animate-delay="2s"></div>
							</div>
							<div class="center-text textcenter"></div>
							<div class="center-plane"></div>
							<div class="center-statue"></div>
						</div>
						<!--center end-->
						<!--bottom start-->
						<div class="page-bottom ani" swiper-animate-effect="bounceInUp" swiper-animate-delay="1s">
							<div class="bottom1"></div>
							<div class="bottom2 textcenter"></div>
						</div>
						<!--bottom end-->
					</div>	
					<div class="next"></div>
				</div>
				<div class="swiper-slide page page-seven">
					<div class="page-wrapper">
						<div class="page-header ani" swiper-animate-effect="fadeIn"></div>
						<!--top start-->
						<div class="page-title textcenter ani" swiper-animate-effect="bounceIn"  ></div>
						<!--top end-->
						<!--center start-->
						<div class="page-center ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.5s">
							<div class="center-table textcenter">
								<div class="table ani" swiper-animate-effect="toLeft" swiper-animate-delay="1s" swiper-animate-duration="1s">
									<div></div>
								</div>
								<div class="text1 ani" swiper-animate-effect="fadeIn" swiper-animate-delay="1.5s"></div>
								<div class="text2 ani" swiper-animate-effect="fadeIn" swiper-animate-delay="2s"></div>
							</div>
							<div class="center-tabletext textcenter ani" swiper-animate-effect="fadeIn" swiper-animate-delay="2.5s"></div>
							<div class="center-statue"></div>
							<div class="center-plane"></div>
							<div class="center-text textcenter"></div>
						</div>
						<!--center end-->
						<!--bottom start-->
						<div class="page-bottom ani" swiper-animate-effect="bounceInUp" swiper-animate-delay="1s">
							<!--<div class="bottom-top">
								<div class="es1"></div>
								<div class="es2"></div>
								<div class="es3"></div>
								<div class="es4"></div>
								<div class="es5"></div>
								<div class="es6"></div>
							</div>
							<div class="bottom-line"></div>
							<div class="text-wrapper">
								<div class="text text1"></div>
								<div class="text text2"></div>
								<div class="text text3"></div>
								<div class="text text4"></div>
							</div>-->
						</div>
						<!--bottom end-->
					</div>	
					<div class="next"></div>
				</div>
				<div class="swiper-slide page page-eight">
					<div class="page-wrapper">
						<div class="page-header ani" swiper-animate-effect="fadeIn"></div>
						<!--top start-->
						<div class="page-title textcenter ani" swiper-animate-effect="bounceIn"  >
							<div class="playbtn"></div>
							<video id="video" poster="img/eighthpage/video-poster.jpg" x5-video-player-type="h5" x5-video-player-fullscreen="true" >
								<source src="http://video.laisj.cn/8812dcca462540349ca5ddd5a9b6dae2/af10b04d1c424959bb77bca928b9e746-699a80a29a15c59c9d0868389f86cc3f.mp4" type="audio/mp4"></source>
							</video>
							<div class="video-text textcenter"></div>
						</div>
						<!--top end-->
						<!--center start-->
						<div class="page-center ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.5s">
							<div class="center-text textcenter" id="sharebtn"></div>
							<div class="center-statue"></div>
							<div class="center-plane"></div>
							<div class="center-logo textcenter"></div>
							<div class="center-t"></div>
						</div>
						<!--center end-->
						<!--bottom start-->
						<div class="page-bottom ani" swiper-animate-effect="bounceInUp" swiper-animate-delay="1s"></div>
					</div>	
				</div>
			</div>
			<!--音乐播放器-->
			<div class="music-wrapper" id="musicbtn">
				<div class="icon-music"></div>
				<audio id="musicAudio" src="data/music.mp3" loop="loop" controls="controls"></audio>
			</div>
			<!--loading-->
			<div class="loading-wrapper">
				<div class="loading-view">
					<div class="loading-icon"></div>
					<div class="loading-percent">0%</div>
				</div>
			</div>
			<!--分享遮罩-->
			<div class="share-view">
				<div class="share-icon"></div>
			</div>
		</div>
	</body>
	<script src="js/jquery-1.12.4.min.js" ></script>
	<script src="js/swiper.min.js" ></script>
	<script src="js/swiper.animate1.0.2.min.js" ></script>
	<script src="js/resLoader.js" ></script>
	<script src="js/echarts.simple.min.js" ></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="http://weixin.t1.laisj.com/wxman/api/jsapi_config/0"></script>
	<script src="js/index.js" ></script>
</html>
